<template>
  <div>
    <el-button type="primary" plain @click="showShops">选择商品</el-button>
    <el-table :data="addForm" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="50"></el-table-column>
      <el-table-column prop="shopNumber" label="商品编号"></el-table-column>
      <el-table-column prop="shopName" label="商品名称"></el-table-column>
      <el-table-column prop="type.name" label="商品类型"></el-table-column>
      <el-table-column prop="shopPrice" label="商品单价(元)"></el-table-column>
      <el-table-column label="供应商">
        <template slot-scope="scope">
          <el-select v-model="scope.row.supplyOrderId" @click.native="openSupply(scope.row.id,scope.$index)" placeholder="请选择供应商">
            <el-option :label="'供应商:'+scope.row.uname"
                       :value="scope.row.supplyOrderId"></el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column prop="supplierPrice" label="供货单价(元)"></el-table-column>
      <el-table-column label="采购数量">
        <template slot-scope="scope">
          <el-input v-model.number="scope.row.shopNum"></el-input>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="danger" @click="removeShop(scope.$index)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div v-if="addForm.length>0" >
      <el-row style="padding: 10px 0;">
        <el-col :span="3" :offset="14">总价格:{{totalMoney}}</el-col>
        <el-col :span="3" :offset="1">总采购数量:{{totalNum}}</el-col>
      </el-row>
      <el-row >
        <el-col :span="4" :offset="20">
          <el-button type="primary" @click="submitForm()">创建订单</el-button>
          <el-button @click="resetForm()">重置</el-button>
        </el-col>
      </el-row>
    </div>

    <div>
      <show-shops ref="showShops"></show-shops>
      <show-supply ref="showSupply"></show-supply>
    </div>
  </div>
</template>

<script>
  import ShowShops from "./ShowShops";
  import ShowSupply from "./ShowSupply";

  export default {
    name: "AddPurchase",
    data() {
      return {
        addForm:[],//订单数据
        suppliers: [], //供应商维护商品表
        multipleSelection: [],//选择的数组
      }
    },
    methods: {
      openSupply(gid,index){
      //  打开供应商维护表
        this.$refs.showSupply.dialogVisible=true;
        this.$refs.showSupply.supply.gId=gid;
        this.$refs.showSupply.fromIndex=index;
        this.$nextTick(item=>{
          this.$refs.showSupply.getData();
        })
      },
      showShops() {
        //打开商品的模态框
        this.$refs.showShops.dialogVisible = true;
      },
      removeShop(index) {//删除不需要的商品
        this.$confirm('是否移除该商品?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.addForm.splice(index, 1);
          this.$message.success("移除成功")
        }).catch();
      },
      submitForm() {//提交数据
        //判读是否选择了商品
        if (this.multipleSelection.length > 0) {
          let suppliersIds = new Set();
          let purchaseInfos = []; //存入采购
          //组装数据
          this.multipleSelection.forEach(item => {
            //获取所有的供应商id
            suppliersIds.add(item.supplyId);
          });
          suppliersIds.forEach(item => {
            var purchaseInfo = {supplyId: item};
            let details = [];//存放详情数组
            this.multipleSelection.forEach(item2 => {
              if (item == item2.supplyId) {
                var detail = {
                  supplyOrderId: item2.supplyOrderId,
                  shopNum: item2.shopNum
                }
                details.push(detail);
              }
            });
            purchaseInfo["purchaseDetails"] = details;
            purchaseInfos.push(purchaseInfo);
          });
          this.$axios
            .post("purchase/purchase.action", purchaseInfos)
            .then(res => {
              if (res.data.code > 0) {
                this.$message.success(res.data.msg);
                this.resetForm();
              } else {
                this.$message.error(res.data.msg);
              }
            })
            .catch(err => {
              this.$message.error(err);
            })
        } else {
          this.$message.error("请选中后再提交")
        }
      },
      resetForm() {//重置
        this.addForm = [];
      },
      handleSelectionChange(val) {
        //checkbox选项表改变获取对象数组
        this.multipleSelection = val;
      },
    },
    computed: {
      totalNum() {
        let num = 0;
        this.multipleSelection.forEach(item => {
          num += item.shopNum;
        })
        return num;
      },
      totalMoney() {
        let money = 0;
        this.multipleSelection.forEach(item => {
          money += item.supplierPrice * item.shopNum;
        })
        return money + "元";
      }
    },
    components: {
      ShowShops,ShowSupply
    },
    created() {
    }
  }
</script>

<style scoped>

</style>
